<template>
  <div style="padding: 10px 5px" :key="keyFlag">
    <div :class="setting.options.cardClass" :style="{ width: setting.options.cardWidth + '%',backgroundColor:setting.options.bgColor,[borderLocation]:'4px solid'+setting.options.borderColor}">
      <span v-if="setting.options.cardClass == 'card_left'">
        <slot name="cardLeft">
          <vab-icon :icon="setting.options.icon"  :style="{ color: setting.options.iconColor , fontSize:setting.options.iconSize+'px', marginRight: '5px',}"></vab-icon>
        </slot>
      </span>
      <span style="margin-left: 10px">
        <h2 :style="{ color: setting.options.titleColor , fontSize:setting.options.titleSize, }">{{ setting.options.cardTitle }}</h2>
        <p :style="{ color: setting.options.contentColor , fontSize:setting.options.contentSize, }">{{ setting.options.cardContent }}</p>
      </span>
      <span v-if="setting.options.cardClass == 'card_right'">
        <slot name="cardRight">
          <vab-icon :icon="setting.options.icon"  :style="{ color: setting.options.iconColor , fontSize:setting.options.iconSize+'px', marginRight: '5px',}"></vab-icon>
        </slot>
      </span>
    </div>
  </div>
</template>
<script>
  import VabIcon from '@/layout/vab-icon'
  export default {
    props: {
      setting: {},
    },
    components: {
      VabIcon,
    },
    data() {
      return {
        borderLocation:null,
        keyFlag:1
      }
    },
    created(){
      console.log('刷新')
      if(this.setting.options.cardClass == 'card_left'){
          this.borderLocation = 'borderLeft'
      }else{
        this.borderLocation = 'borderRight'
      }
    },
    watch:{
      setting:{
        handler(){
          if(this.setting.options.cardClass == 'card_left'){
          this.borderLocation = 'borderLeft'
          }else{
            this.borderLocation = 'borderRight'
          }
          this.keyFlag = new Date().toLocaleDateString() + new Date().toLocaleTimeString();
          console.log(11111,this.keyFlag)
        },
        deep:true
      }
    }
  }
</script>
<style scoped lang="less">
  .card_left {
    //border-left: 4px solid #003166;
    width: 100%;
    min-height: 100px;
    padding: 10px 5px !important;
    display: flex;
   // background-color: #3395ff;
    border-radius: 5px;
    span:nth-child(1) {
      flex-grow: 1;
      margin: auto;
      text-align: center;
      font-size: 40px;
    }
    span:nth-child(2) {
      margin: auto;
      flex-grow: 9;
    }
  }
  .card_right {
   // border-right: 4px solid #ff9500;
    width: 100%;
    min-height: 100px;
    display: flex;
    //background-color: #ffaa33;
    border-radius: 5px;
    span:nth-child(2) {
      flex-grow: 1;
      margin: auto;
      text-align: center;
      font-size: 40px;
    }
    span:nth-child(1) {
      margin: auto;
      flex-grow: 9;
      text-align: right;
    }
  }
  .card_no {
    //border-right: 4px solid #7a7a7a;
    width: 100%;
    min-height: 100px;
    //background-color: #949494;
    border-radius: 5px;
    display: flex;
    span {
      margin: auto 0;
    }
  }
</style>
